<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>指令</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>指令 : v-once</h3>

        <div id="app"></div>

        <script>
            const options = {
                // 指定根组件的模板
                template: `<a href="http://www.kaifamiao.com" @click.prevent="increase">点我增加</a>
                           <p v-once>{{ counter }} </p>
                           <p>{{ counter }} </p>`,
                data(){
                    return {
                        counter: 1000
                    }
                },
                // 指定根组件中可以使用的方法
                methods: {
                    increase(){
                        this.counter++ ;
                    }
                }
            }
            // 创建实例
            const app = Vue.createApp( options );
            // 挂载实例
            const vm = app.mount( '#app' );
            // 打印 vm (实际上就是根组件)
            console.log( vm );
        </script>
        
    </body>
</html>